<template>
	<view id = "main">

		<view class="header">
			<view class="main_title">
				当前任务：{{info.surveyName}}
			</view>
			<view class="vice_title">
				副标题：{{curLabelName}}
			</view>

		</view>

		<view class='productNav'>
		  <!-- 左侧 -->
		  <view class='left'>
			  <view v-for="(item, index) of labelList" :key="index">
		         <view :class="active == index?'selected':'normal'" :id="index" @click='switchNav'>{{item.label}}</view>
			  </view>
		  </view>

		  <!-- 右侧 -->
		  <view class='right'>
		    <view class='type'>

				<block v-for="(item, index) of labelList" :key="index">
					<view v-show="index == currentTab">
						<view class='container'>
							<scroll-view scroll-y="true" style="max-height: 90vh;">

								<block v-for="(qitem, _index) of questionList" :key="_index" >

											<!-- 单选题 -->
											<view class='question naire' v-if="qitem.questionType == '0'">{{qitem.questionNo}}.{{qitem.questionName}}
												<view class="question-item">
												   <radio-group
													  placement="column"
													>
														<view class="radioItem">
															  <radio
															    style="transform:scale(0.7)"
																disabled
																v-for="(sitem, i) of qitem.options"
																:key="i"
																label-size="13px"
																:checked="sitem.optionText == qitem.answer"
															  >{{sitem.optionText}}
															  </radio>
														</view>
													</radio-group>
												</view>
											</view>

											<!-- 多选题 -->
											<view class='question naire' v-if="qitem.questionType == '1'">{{qitem.questionNo}}.{{qitem.questionName}}<text>(多选)</text>
											   <view class="question-item">

												   <checkbox-group :data-qitem="qitem" placement="column" disabled>
														<label class="" v-for="(mitem, i) of qitem.options" :key="i">
															<view class="checkItem">
																<checkbox :value="[mitem.optionId,mitem.optionText]" style="transform:scale(0.7)" disabled :checked="mitem.checked"/>{{mitem.optionText}}
															</view>
														</label>
													</checkbox-group>
												</view>
											</view>

											<!-- 填空题 -->
											<view class='question naire1' v-if="qitem.questionType == '2'">{{qitem.questionNo}}.{{qitem.questionName}}
												<view class="question-item">
												   <input
													  :value='qitem.answer'
													  class="inputItem"
													  placeholder="请输入内容"
													  :data-qitem="qitem"
													  disabled
													></input>
												</view>
											</view>

											<!-- 问答题 -->
											<view class='question naire' v-if="qitem.questionType == '3'">{{qitem.questionNo}}.{{qitem.questionName}}
												<view class="question-item">
													<textarea :value='qitem.answer' class="textareaItem" :data-qitem="qitem"  placeholder="请输入内容" disabled></textarea>
												</view>
											</view>



								</block>

							</scroll-view>

						</view>
					</view>
				</block>

		    </view>
		  </view>

		</view>




	</view>
</template>

<script>
	// import {
	// 	getLabelBySurveyId,
	// 	qlistByLabelId,
	// 	listAnswer
	// } from '@/common/questionnaire.js'
	export default {
		data() {
			return {
				info:{},
				questionList: [],
				answer: [],
				mainAnswer:[],
				labelList:[],
				curLabelName:'',
				id: 0,
				active:0,
				currentTab:0,
			}
		},

		onLoad: function(option){ //option为object类型，会序列化上个页面传递的参数
			console.log(option.item); //打印出上个页面传递的参数。
			const details = JSON.parse(option.item);
			console.log(details);
			this.info = details;
			this.getLabelList(details.surveyId);

		},

		methods: {
			showToast() {
				const params = {type: 'loading',message: "正在加载"}
				this.$refs.uToast.show({
					...params
				})
			},

			getQListByLabelId(param){
				const data = {
				  surveyId:this.info.surveyId,
				  labelId:this.labelList[this.active].id,
				  userId: this.info.userId
				}
				const questionList = [];
				console.log(data)

				qlistByLabelId(param).then(res=>{
				  for(var a in res.data){
					questionList.push(res.data[a])
				  }
				  console.log('问题列表',questionList)
					listAnswer(data).then(response=>{
						console.log(response)
					  if(response.code === 200){
						//将问题数据和答案数据放在一起
						console.log(123,response.rows)
						const row = response.rows
						for(let i in questionList){
						  //判断多选题，处理答案
						  if(questionList[i].questionType === '1'){
							for(let j in row){
							  if(questionList[i].questionId === row[j].questionId){
								  //判断如果该选项是用户作答的答案，就增加一个属性checked为true，用于页面展示
								  for(let o in questionList[i].options){
									  if(questionList[i].options[o].optionId == row[j].optionId){
										  questionList[i].options[o].checked = true
										  break
									  }
								  }
							  }
							}
						  }else{//其他题目答案处理
							for(let j in row){
							  if(questionList[i].questionId === row[j].questionId){
								questionList[i].answerId = row[j].optionId
								questionList[i].answer = row[j].extendValue
							  }
							}
						  }

						}
					  }
					  this.questionList = questionList
					})
				})

				// setTimeout(()=>{
				//
				// },1000 )
			  },


			//根据上一个页面传来的信息内容查询label数据
			getLabelList(suveryId){

				 getLabelBySurveyId(suveryId).then(res=>{
					uni.hideLoading()
					console.log(res)
					//在这里获取label信息并存入data中的label表中
					if(res.data[0].children == null){
						this.labelList.push(res.data[0])
					}else{
						this.labelList = res.data[0].children
					}
				 })

				 setTimeout(()=>{
					 console.log(this.labelList)
					 this.curLabelName = this.labelList[0].label

					 //根据label获取问卷
					 this.getQListByLabelId(this.labelList[0].id)

				 },200);
			},





			// 左侧点击事件
			switchNav: function (e) {
				//this.showToast()
			    var id = e.target.id;
				this.curLabelName = this.labelList[id].label
			    if (this.currentTab == id) {
			      return false;
			    } else {
			        this.currentTab=id
			    }
			    this.active = id
				if(this.mainAnswer[id] == null ){
					this.answer = []
				}else{
					this.answer = this.mainAnswer[id]
				}

				//切换label属性时使用labelId查询问题数据
				this.getQListByLabelId(this.labelList[id].id)

			},



			submit(e) {

			},
		}
	}
</script>

<style lang="scss">
/* miniprogram/pages/testSAS/testSAS.wxss */
#main{
	height: 100%;
}
//头部信息展示样式
.header{
	width: 100%;
	height: 180rpx;
	background-color: #38a9e1;
	color:white;
	.main_title{
		margin-left: 30rpx;
		padding-top: 20rpx;
		font-size: 30rpx;
		font-weight: 650;
	}
	.vice_title{
		margin-left: 30rpx;
	}
	.top-Button{
		width: 15%;
		height: 50rpx;
		margin-right: 10rpx;
		font-size: 25rpx;
		float: right;
		box-shadow: black 1px;
		color: #38a9e1;
	}
}



//左侧样式
.productNav{
   display: flex;
  // flex-direction: row;
  // font-family: "Microsoft YaHei"
  height: calc(100% - 150rpx);
}
.left{
  width: 25%;
  font-size: 25rpx;
  background-color: #f4f4f4;
}
.left view{
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
}
.selected{
  background-color: #fff;
  border-left: 2px solid #38a9e1;
  font-weight: bold;
  color: #38a9e1;
  overflow: hidden;
  text-overflow:ellipsis;
}
.normal{
  background-color: #f4f4f4;
  border-bottom: 1px solid #f2f2f2;
  overflow: hidden;
  text-overflow:ellipsis;
}

//右侧样式
.right{
  width:75%;
  //height: 100%;
  margin: 0;
  background-color: white;
  flex-direction: column;
  //height: calc(100vh - 90px);
  overflow-y: scroll;
  overflow-x: hidden;
  overflow: auto;
}
//主体答题样式
.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;//（决定元素排列方向）沿垂直主轴从上到下排列，起点在上沿
	justify-content: flex-start;//从行首起始位置开始排列
}
.naire {
  height: 240rpx;
}
.naire1 {
  height: 150rpx;
}
.question {
  font-size: 28rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
  color: #38a9e1;
}
.question text{
	font-size: 25rpx;
	line-height:25rpx;
}
.question-item{
	margin-top: 20rpx;
}
.radioItem{
	//margin-left: 10rpx;
	margin-top: -13rpx;
	height: 12rpx;
	color: gray;
	font-size: 30rpx;
	float: left;
}
.checkItem{
	margin-top: -13rpx;
	height: 12rpx;
	color: gray;
	font-size: 25rpx;
}
.inputItem{
	border-radius: 10rpx;
	border: 1px solid gray;
	height: 60rpx;
	min-height: 60rpx;
	line-height: 25rpx;
	width: 95%;
	color: gray;
}
.textareaItem{
	margin-top: -15rpx;
	border-radius: 10rpx;
	border: 1px solid gray;
	height: 180rpx;
	min-height: 180rpx;
	width: 95%;
	color: gray;
}

.border {
  height: 2rpx;
  width: 90%;
  background-color: #d4d4d4;
  margin: 16rpx auto;
}


.button-group {
  display: flex;
  flex-direction: row;
  width: 80%;
  margin: auto;
  justify-content: space-between;
}
.button {
  background: #fcbe39;
  border-radius: 100rpx;
  font-size: 30rpx;
  line-height: 52rpx;
  height: 52rpx;
  width: 172rpx;
  margin-top: 10rpx;
  font-weight: bold;
  color: #fff;
}
.button::after {
  border: 0;
}
.id {
  text-align: center;
  font-size: 24rpx;
  color: #c2c2c2;
  margin: auto;
  margin-top: 20rpx;
}
.textInPopup{
	height: 300rpx;
}
.textInPopup text{
	margin-left: 9%;
	height: 200rpx;
	line-height: 200rpx;
	font-weight: 450;
	font-size: 33rpx;
	margin-bottom: -10rpx;
}
.buttonInPopup{
	background: #38a9e1;
	border-radius: 100rpx;
	font-size: 30rpx;
	line-height: 52rpx;
	height: 52rpx;
	width: 200rpx;
	font-weight: bold;
	color: #fff;
}

</style>
